<template>
  <div>
    <div>
      <!--  <h1>施工单位</h1> -->
      <div class="top">
        <el-dropdown>
          <el-button>
            导入<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>导入案卷目录</el-dropdown-item>
            <el-dropdown-item>导入册内目录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-dropdown>
          <el-button>
            导出<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>导出案卷目录</el-dropdown-item>
            <el-dropdown-item>导出册内目录</el-dropdown-item>
            <el-dropdown-item>导出全引目录</el-dropdown-item>
            <el-dropdown-item>导出备考表</el-dropdown-item>
            <el-dropdown-item>导出案卷封面</el-dropdown-item>
            <el-dropdown-item>导出盒子封面</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <p>
          <span class="Seat">{{ now_location }}</span>
        </p>
      </div>
      <div class="container">
        <div class="container-left">
          <div class="input-top">
            <el-input
              placeholder="输入分类名称进行搜索"
              v-model="filterText"
              clearable
              suffix-icon="iconfont icon-sousuo2"
            >
            </el-input>
          </div>

          <div class="treePlate scroll_wrap">
            <el-tree
              class="filter-tree"
              :data="data"
              :props="defaultProps"
              default-expand-all
              node-key="id"
              :draggable="true"
              :current-node-key="currentNodeKey"
              :filter-node-method="filterNode"
              :expand-on-click-node="false"
              highlight-current
              @node-click="handleNodeClick"
              ref="tree"
            >
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <span class="nodeLabel">
                  {{ node.label }}
                  <span class="nodeLefts">{{ data.data_count }}</span></span
                >
                <span class="nodeLeft">
                  <el-button
                    class="nodeBtn"
                    size="medium"
                    type="text"
                    @click.stop="append(data)"
                  >
                    <i class="iconfont icon-xinjian"></i>
                  </el-button>
                  <el-button
                    class="nodeBtn"
                    size="medium"
                    type="text"
                    @click.stop="() => remove(node, data)"
                  >
                    <i class="iconfont icon-a-shanchu1"></i>
                  </el-button>
                  <el-button
                    class="nodeBtn"
                    size="medium"
                    type="text"
                    @click.stop="() => Edit(node, data)"
                  >
                    <i class="iconfont icon-a-bianji13"></i>
                  </el-button>
                </span>
              </span>
            </el-tree>
          </div>
        </div>
        <div class="container-right">
          <el-form :inline="true">
            <div class="commontop">
              <div class="commontop-left">
                <!-- <el-checkbox
                  label="全选"
                  :indeterminate="isIndeterminate"
                  v-model="checkAll"
                  @change="selAll()"
                ></el-checkbox> -->
                <el-input
                  placeholder="输入关键字进行搜索"
                  v-model="froms.keyword"
                  clearable
                  prefix-icon="el-icon-search"
                ></el-input>
                <el-button class="searchbgc" icon="iconfont icon-sousuo2"
                  >搜索</el-button
                >
                <el-button
                  v-show="xsyc === '1' ? true : false"
                  icon="iconfont icon-xinzenganjuanmulu"
                  >新增案卷</el-button
                >
                <el-button
                  class="searchbgc"
                  v-show="xsyc === '1' ? true : false"
                  >检查案卷</el-button
                >
                <!--  <el-button class="searchbgc" @click="InspectJuan"
                  >检查册内目录</el-button
                > -->
                <el-button
                  class="searchbgc"
                  icon="iconfont icon-piliangdaorupdf"
                  v-show="xsyc === '1' ? true : false"
                  >批量导入音像</el-button
                >
                <el-button class="searchbgc">提交审批</el-button>
                <el-button class="searchbgc">文字替换</el-button>
                <el-button class="searchbgc">问题标记</el-button>
                <!-- <el-button class="searchbgc">删除</el-button> -->
              </div>
              <div class="commontop-right">
                <el-button
                  v-show="xsyc === '1' ? true : false"
                  class="red"
                  icon="iconfont icon-shanchu1"
                  >删除</el-button
                >
              </div>
            </div>
          </el-form>

          <el-table
            class="table"
            v-loading="isLoading"
            :data="tableData"
            ref="multipleTable"
            @row-click="Rowclick"
            @row-dblclick="handleClick"
            @cell-click="tabClick"
            @selection-change="handleSelectionChange"
            border
            :row-class-name="tableRowClassName"
            :cell-class-name="tableCellClassName"
            :header-cell-style="{
              backgroundColor: '#3963fd',
              color: '#fff',
              'text-align': 'center',
            }"
            style="width: 100%; margin-top: 20px"
          >
            <template slot="empty">
              <img
                src="@/assets/imgs/暂未数据.png"
                alt
                style="margin-top: 104px"
              />
              <p style="margin-top: 15px; margin-bottom: 104px">暂未有数据</p>
            </template>
            <el-table-column type="selection" width="35"></el-table-column>
            <el-table-column type="number" width="60" label="序号">
              <template slot-scope="scope">
                <a
                  @click="goInvolume(scope.row)"
                  style="color: blue; cursor: pointer"
                  >{{ scope.row.number }}
                </a>
              </template>
            </el-table-column>
            <el-table-column
              width="220"
              prop="archives_no"
              label="档案号"
              align="center"
            >
              <template slot-scope="scope">
                <div
                  v-if="
                    scope.row.index === clickRow &&
                    scope.column.index === clickCell
                  "
                >
                  <el-input
                    class="InputTits"
                    ref="editInput"
                    type="textarea"
                    v-model="scope.row.archives_no"
                    maxlength="300"
                    size="mini"
                  />
                </div>
                <div v-else>
                  {{ scope.row.archives_no }}
                  <!--  <a
                    @click="goInvolume(scope.row)"
                    style="color: blue; cursor: pointer"
                    >{{ scope.row.archives_no }}
                  </a> -->
                </div>
              </template>
            </el-table-column>

            <el-table-column align="left" prop="title" label="音像档案">
              <template slot-scope="scope">
                <div
                  v-if="
                    scope.row.index === clickRow &&
                    scope.column.index === clickCell
                  "
                >
                  <el-input
                    class="InputTit"
                    ref="editInput"
                    type="textarea"
                    v-model="scope.row.title"
                    maxlength="300"
                    size="mini"
                  />
                </div>
                <div v-else>{{ scope.row.title }}</div>
              </template>
            </el-table-column>
            <el-table-column
              width="180"
              prop="start_end_date"
              label="拍摄起止日期"
              align="center"
            >
              <template slot-scope="scope">
                <div
                  v-if="
                    scope.row.index === clickRow &&
                    scope.column.index === clickCell
                  "
                >
                  <el-input
                    ref="editInput"
                    type="textarea"
                    v-model="scope.row.start_end_date"
                    maxlength="300"
                    size="mini"
                  />
                </div>
                <div v-else>{{ scope.row.start_end_date }}</div>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              width="60"
              prop="page_num"
              label="张数"
            >
              <template slot-scope="scope">
                <div
                  v-if="
                    scope.row.index === clickRow &&
                    scope.column.index === clickCell
                  "
                >
                  <el-input
                    ref="editInput"
                    type="textarea"
                    v-model="scope.row.page_num"
                    maxlength="300"
                    size="mini"
                  />
                </div>
                <div v-else>{{ scope.row.page_num }}</div>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              width="60"
              prop="store_period"
              label="操作期限"
            >
              <template slot-scope="scope">
                <div
                  v-if="
                    scope.row.index === clickRow &&
                    scope.column.index === clickCell
                  "
                >
                  <el-select clearable 
                    v-model="scope.row.store_period"
                    @change="inputBlur"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.id"
                      :label="item.title"
                      :value="item.title"
                    >
                    </el-option>
                  </el-select>
                </div>
                <div v-else>{{ scope.row.store_period }}</div>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              width="60"
              prop="blueprint"
              label="备注"
            >
              <template slot-scope="scope">
                <div
                  v-if="
                    scope.row.index === clickRow &&
                    scope.column.index === clickCell
                  "
                >
                  <el-input
                    ref="editInput"
                    type="textarea"
                    v-model="scope.row.blueprint"
                    maxlength="300"
                    size="mini"
                  />
                </div>
                <div v-else>{{ scope.row.blueprint }}</div>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="90px">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  class="red"
                  @click.native.prevent="deleteRow(scope.row.id)"
                  ><i class="el-icon-delete"></i
                ></el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="current_page"
              :page-sizes="pageSizeArr"
              :page-size="iDS.per_page"
              layout="total, sizes, prev, pager, next"
              :total="total"
            >
            </el-pagination>
          </div>
        </div>
      </div>
      <el-dialog :visible.sync="dialogVisibleAmend" width="25%" class="tab">
        <el-form :model="editF" ref="editF" label-position="left">
          <el-form-item prop="title" label="分类名称">
            <el-input
              v-model="editF.title"
              placeholder="请输入分类名"
            ></el-input>
          </el-form-item>
          <el-form-item prop="archives_no" class="IPBT" label="档案号">
            <el-input
              v-model="editF.archives_no"
              placeholder="请输入档案号"
              clearable
            >
            </el-input>
          </el-form-item>

          <div class="login-btn">
            <el-button @click="dialogVisibleAmend = false">取 消</el-button>
            <el-button type="primary" @click="editModify('editF')"
              >编辑分类</el-button
            >
          </div>
        </el-form>
      </el-dialog>
      <el-dialog
        :visible.sync="outerVisible"
        class="tab"
        title="新增分类目录"
        width="25%"
      >
        <el-form
          label-position="left"
          :rules="classFormrules"
          :model="classForm"
          ref="classForm"
        >
          <el-form-item prop="title" label="分类名称">
            <el-input
              v-model="classForm.title"
              placeholder="请输入分类名称"
            ></el-input>
          </el-form-item>
          <el-form-item prop="archives_no" class="IPBT" label="档案号">
            <el-input
              v-model="classForm.archives_no"
              placeholder="请输入档案号"
              clearable
            >
            </el-input>
          </el-form-item>

          <div class="login-btn">
            <el-button @click="outerVisible = false">取 消</el-button>
            <el-button type="primary" @click="category('classForm')"
              >添加分类</el-button
            >
          </div>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import commonInfo from "@/utils/common";
import CommonDawer from "../../../../components/common/commonTab.vue";
import fileDownload from "js-file-download";
export default {
  components: {
    CommonDawer,
  },
  watch: {
    /* 监听当前选中的节点 */
    currentNodeKey(id) {
      // Tree 内部使用了 Node 类型的对象来包装用户传入的数据，用来保存目前节点的状态。可以用 $refs 获取 Tree 实例
      if (id.toString()) {
        this.$refs["tree"].setCurrentKey(id);
      } else {
        this.$refs["tree"].setCurrentKey(null);
      }
    },
    /* 树状图监听搜索 */
    filterText(val) {
      this.$refs.tree.filter(val);
    }, // 监听表格多选事件
  },
  data() {
    return {
      //按钮显示隐藏
      xsyc: "1",

      clickRow: null, // 当前点击的行
      clickCell: null, // 当前点击的列
      tabClickLabel: "", // 当前点击的列名

      /* 当前选中的节点 */
      currentNodeKey: "",

      /* 显示当前位置 */
      now_location: "",
      /* 表格数据 */
      tableData: [
        {
          archives_no: "J•SJKZ•5ZH123/169-1",
          id: 1,
          index: 0,
          number: 1,
          page_num: 207,
          store_period: "",
          start_end_date: "",
          blueprint: "",
          title:
            "新建石家庄至济南铁路客运专线K123+744～K169+179段站前工程开工报告及附件",
        },
      ],
      editForm: {
        archives_no: "",
        id: "",
        index: "",
        number: "",
        page_num: "",
        store_period: "",
        start_end_date: "",
        blueprint: "",
        title: "",
      },

      /* 添加分类表单 */
      classForm: {
        id: "",
        title: "",
        parent_id: "",
        template_id: "",
        archives_no: "",
      },
      /* 添加分类表单失焦判断 */
      classFormrules: {
        title: [
          {
            required: true,
            message: "请输入分类名称",
            trigger: "blur",
          },
        ],
        archives_no: [
          {
            required: true,
            message: "请输入档案号",
            trigger: "blur",
          },
        ],
      },
      /* 添加分类蒙尘 */
      outerVisible: false,
      /* 表格获取 */
      iDS: {
        project_classify_id: "",
        part_company_id: "",
        per_page: 10,
        page: 1,
      },

      //树状图编辑
      editF: {
        title: "",
        archives_no: "",
      },
      /* 编辑分类蒙尘 */
      dialogVisibleAmend: false,
      //列表点击行的index
      tabClickIndex: null,
      /* 获取树状图的数据 */
      IDS: {
        company_id: "",
      },
      //树状图搜索
      filterText: "",
      //树状图数据
      data: [
        {
          title: "音像档案",
        },
      ],
      /* 树状图的子集和标题 */
      defaultProps: {
        children: "children",
        label: "title",
      },
      //页数
      pageSizeArr: JSON.parse(JSON.stringify(commonInfo.pageSizeArr)),
      /* 当前页 */
      current_page: 1,
      /* 总条数 */
      total: 0,
      /* 加载页面 */
      isLoading: false,
      /* 时间期限选择器 */
      options: [
        { id: 1, title: "永久" },
        { id: 2, title: "10年" },
        { id: 3, title: "3年" },
      ],

      /* 表单宽度 */
      formLabelWidth: "120px",
      //搜索传递的值
      froms: {
        project_classify_id: "",
        part_company_id: "",
        keyword: "",
      },
    };
  },

  methods: {
    //多选
    handleSelectionChange(val) {
      this.multipleSelection = val;

      //console.log(this.multipleSelection);
    },
    //树形编辑
    async Edit(node, data) {
      this.editF = {};
      this.dialogVisibleAmend = true;
    },
    //树形添加
    async append(data) {
      console.log("data:", data);
      this.outerVisible = true;
    },
    //分页
    handleCurrentChange(val) {
      this.current_page = val;
      this.iDS.page = val;
    },
    //分页
    handleSizeChange(val) {
      this.iDS.per_page = val;
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    //树状图被点击时
    handleNodeClick(data) {
      console.log(data);
    },
    /* 表格选中获取当前信息 */
    handleClick(row, column, event) {
      console.log(row, column, event, "dfd");
    },

    // 控制input显示 row 当前行 column 当前列
    tabClick(row, column, cell, event) {
      var that = this;
      switch (column.label) {
        case "档案号":
          that.clickRow = row.index;
          that.clickCell = column.index;
          that.tabClickLabel = column.label;
          break;
        case "拍摄起止日期":
          that.clickRow = row.index;
          that.clickCell = column.index;
          that.tabClickLabel = column.label;
          break;
        case "张数":
          that.clickRow = row.index;
          that.clickCell = column.index;
          that.tabClickLabel = column.label;
          break;
        case "音像档案":
          that.clickRow = row.index;
          that.clickCell = column.index;
          that.tabClickLabel = column.label;
          break;
        case "保管期限":
          that.clickRow = row.index;
          that.clickCell = column.index;
          that.tabClickLabel = column.label;
          break;
        case "备注":
          that.clickRow = row.index;
          that.clickCell = column.index;
          that.tabClickLabel = column.label;
          break;
        default:
          return;
      }
    },
    // 把每一行的索引放进row
    tableRowClassName({ row, rowIndex }) {
      row.index = rowIndex;
    },

    // 把每一列的索引放进column
    tableCellClassName({ column, columnIndex }) {
      column.index = columnIndex;
    },
    /* 点击表格获取当前的信息 */
    Rowclick(row) {
      console.log(row);
      this.editForm = row;
    },
    //跳转到册内目录
    goInvolume(row) {
      this.$router.push({
        path: "/project/template-item/filing/insideAudio",
        query: {},
      });
    },
  },

  created() {},
};
</script>

<style scoped lang="less">
@import "../../../../assets/css/tree.less";
.top {
  display: flex;
  margin: 10px 0;
}
.container {
  display: flex;
}
.container-left {
  width: 300px;
  /deep/.treePlate .el-input {
    width: 240px !important;
  }

  .treePlate {
    width: 300px;
    border-right: 1px solid #dddddd;
    overflow-y: scroll;

    .el-input {
      width: 320px;
      margin-bottom: 10px;
    }
  }
  .input-top {
    display: flex;
  }
}
.container-right {
  flex: 1;
  min-width: 500px;
  margin-left: 20px;
}
/deep/.el-table__header {
  margin-bottom: 20px;
  line-height: 40px;
}
/deep/.el-table {
  background-color: #f3f5fb;
}
/deep/.el-table .cell {
  display: flex;
}
/deep/.table .el-button--mini {
  font-size: 18px !important;
  padding: 7px 5px;
  margin-left: 5px;
}
.tab {
  /deep/
    .el-form-item.is-required:not(.is-no-asterisk)
    > .el-form-item__label:before {
    display: none;
  }

  /deep/ .el-input {
    float: left;
    margin-right: 20px;
  }

  /deep/ .el-form-item__content {
    height: 32px;
  }

  .login-btn {
    margin-top: 80px;
    margin-left: 60px;
    display: flex;
    justify-content: space-around;
  }

  .login-btn button {
    width: 30%;
    height: 36px;
    margin-bottom: 10px;
  }
}
.IPBT {
  .el-input {
    width: 72%;
  }
}
/deep/.el-radio-button__inner {
  padding: 7px 7px;
}
.login-btn {
  display: flex;
  justify-content: space-around;
}
/* /deep/.el-table .el-table__cell.is-center {
  text-align: center;
} */
.el-date-editor--daterange.el-input__inner {
  width: 316px;
}
/deep/.el-table .cell {
  padding-left: 5px;
  padding-right: 5px;
}
/deep/.el-table .el-table__cell {
  padding: 2px 0px;
}
.InputTit {
  width: 97%;
}
.InputTits {
  width: 200px;
}
.table {
  /deep/.el-input--mini .el-input__inner {
    height: 32px;
    font-size: 14px;
  }
}
/deep/.el-input__suffix {
  right: 10px;
}
/deep/.el-input--suffix .el-input__inner {
  padding-right: 14px;
}
/deep/.el-input__inner {
  padding: 0 8px;
}
/deep/.commontop-left .el-input__inner {
  padding: 0 30px;
}
/deep/.table[data-v-37ab2b9a] .el-input--mini .el-input__inner {
  height: 40px;
  font-size: 12px;
}
.el-table td.el-table__cell div {
  width: 100%;
}
/deep/.el-textarea__inner {
  padding: 2px 2px;
  font-size: 14px;
}
.textares {
  /deep/.el-textarea__inner {
    width: 350px;
  }
}
// 滚动条的宽度
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
  width: 6px; // 横向滚动条
  height: 6px; // 纵向滚动条 必写
}
// 滚动条的滑块
/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #ddd;
  border-radius: 3px;
}
</style>